{include file="my/header"}
<script src="{$Think.const.JS_URL}charts.js"></script>


<style>
    h3 {
        line-height: 20px;
        height: 35px;
    }

    .content-block h3::before {
        content: " ";
        width: 8px;
        height: 20px;
        display: block;
        float: left;
        background-color: #393d49;
        margin-right: 7px;
    }

    .layui-card {
        margin: 10px;
    }

    .item-list {
        padding: 9px 15px;
        background: #eee;
        height: 747px;
        overflow: auto;
    }

    .item-list>li::before {
        content: " ";
        width: 8px;
        height: 8px;
        display: block;
        float: left;
        background-color: #393d49;
        margin-right: 7px;
        margin-top: 8px;
    }

    .item-list>li {
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /* height: 52px; */
        cursor: pointer;
        margin-bottom: 15px;
    }

    .item-list>li:hover {
        background: #5FB878;
    }

    .item-list>li>span {
        float: right;
    }
</style>

<div class="layui-container-fluid index-block">
    {if condition="session('userclass') eq 1 || session('userclass') eq 2 "}

    <div class="layui-row">
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body content-block">
                    <h3>教师统计</h3>
                    <div class="chart-block">
                        <div id="pie" style="width: 100%; height: 350px"></div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-body content-block">
                    <h3>课程统计</h3>
                    <div class="chart-block">
                        <div id="pie2" style="width: 100%; height: 350px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card" style="margin-left: 0;">
                <div class="layui-card-body content-block">
                    <h3>待办事项</h3>
                    <div class="chart-block">
                        <ul class="item-list J-item-list">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/if}

    <script>
        var variablesIndex = {
            getIndexInfo: "{:url('test/getIndexInfo')}",
            getTestTeacherUrl: "{:url('test/gettestteacherlist')}",
            getTeacherTestAppUrl: "{:url('test/getteachertestapp')}",
            indexInfo: null,
        }

        $(function () {
            getIndexInfo()


        })

        function getIndexInfo() {
            ajaxRequest('get', variablesIndex.getIndexInfo, null, function (data) {
                console.log(data);

                if (data.itemTreatment.length == 0) {
                    $(".J-item-list").addClass('no-data');
                    // return
                }
                variablesIndex.indexInfo = data
                initCharts();

                $(".J-item-list").empty();

                var tmp = '', url = '';
                if (data.userClass == 1) {
                    var appList = data.itemTreatment;
                    for (let i = 0; i < appList.length; i++) {
                        tmp += '<li>' + appList[i].teachername + ' 申请成为《' + appList[i].name + '》考试任务的监考老师<span>' + (appList[i].create_time ? appList[i].create_time : '') + '</span></li>'
                    }

                    url = '/index/test/teacherlist.html'
                } else {
                    var appList = data.itemTreatment;
                    for (let i = 0; i < appList.length; i++) {
                        if (appList[i].check1 == 0 || appList[i].check1) {
                            tmp += '<li class="J-change-test">' + appList[i].teachername + ' 申请调监考<span>' + (appList[i].create_time ? appList[i].create_time : '') + '</span></li>'
                        } else {
                            tmp += '<li>考试课程 《' + appList[i].coursename + '》 等待审核<span>' + (appList[i].create_time ? appList[i].create_time : '') + '</span></li>'
                        }
                    }

                    url = '/index/test/courselist.html'
                }

                $(".J-item-list").append(tmp);
                $(".J-item-list>li").on("click", function () {
                    if ($(this).hasClass("J-change-test")) {
                        window.location.href = '/index/test/changeresultlist.html'
                    } else {
                        window.location.href = url
                    }
                })

            });
        }

        function initCharts() {
            var myChart1 = echarts.init(document.getElementById('pie'));
            option1 = {
                title: {
                    text: '监考老师统计',
                    left: 'center',
                }, //标题
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}人 ({d}%)',
                }, //提示框，鼠标悬浮交互时的信息提示
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    formatter: function (name) {
                        return name;
                    },
                },
                graphic: {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '老师总数\n' + variablesIndex.indexInfo.teacherTotal, //使用“+”可以使每行文字居中
                        textAlign: 'center',
                        font: ' bolder 16px cursive',
                        fill: '#000',
                        width: 30,
                        height: 30,
                    },
                }, //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
                //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
                series: [
                    {
                        name: '监考老师情况', //tooltip提示框中显示内容
                        type: 'pie', //图形类型，如饼状图，柱状图等
                        radius: ['35%', '60%'],
                        selectedMode: 'single',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: { color: '#3c4858', fontSize: '16' },
                                    formatter: function (data) {
                                        //让series 中的文字进行换行
                                        return data.value;
                                    },
                                },
                            }, //基本样式
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        data: [
                            { value: variablesIndex.indexInfo.teacherTest, name: '已参加监考' },
                            { value: variablesIndex.indexInfo.teacherTotal - variablesIndex.indexInfo.teacherTest, name: '未参加监考' },
                        ], //数据，数据中其他属性，查阅文档
                        color: ['#18a05e', '#dd4f42'], //各个区域颜色
                    }, //数组中一个{}元素，一个图，以此可以做出环形图
                ], //系列列表
            };
            myChart1.setOption(option1);

            var myChart2 = echarts.init(document.getElementById('pie2'));
            option2 = {
                //标题
                title: {
                    text: '考试课程统计',
                    left: 'center',
                },
                //提示框，鼠标悬浮交互时的信息提示
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}门 ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    formatter: function (name) {
                        return name;
                    },
                },
                // 中间文字
                graphic: {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '总课程数\n' + variablesIndex.indexInfo.courseTotal, //使用“+”可以使每行文字居中
                        textAlign: 'center',
                        font: ' bolder 16px cursive',
                        fill: '#000',
                        width: 30,
                        height: 30,
                    },
                },
                series: [
                    {
                        name: '本学院课程录入情况', //tooltip提示框中显示内容
                        type: 'pie', //图形类型，如饼状图，柱状图等
                        radius: ['35%', '60%'],
                        selectedMode: 'single',  //点击饼块,脱离圆点一部分,'single'|'multiple',单选和多选
                        selectedOffset: 8, //设置选中偏移量
                        itemStyle: {
                            borderRadius: 8,
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: { color: '#3c4858', fontSize: '16' },
                                    formatter: function (data) {
                                        //让series 中的文字进行换行
                                        return data.value;
                                    },
                                },
                            }, //基本样式
                        },
                        clockwise: true,
                        label: {
                            fontSize: 18,
                            color: '#235894'
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#235894'
                            }
                        },
                        data: [
                            { value: variablesIndex.indexInfo.passCourse, name: '已通过课程' },
                            { value: (variablesIndex.indexInfo.courseTotal - variablesIndex.indexInfo.passCourse), name: '未通过课程' },
                        ], //数据，数据中其他属性，查阅文档
                        color: ['#4c8bf4', '#ffce44'], //各个区域颜色
                    }, //数组中一个{}元素，一个图，以此可以做出环形图
                ], //系列列表
            };
            myChart2.setOption(option2);
        }
    </script>


    {include file="my/footer"}